<template>
	<view class="grid-columns-3 grid-gap-12 my-8 fs-14 text-white text-center flex flex-center">
		<view v-for="(item, index) in props.list" :key="index" @click="select(item)">
			<view :class="item.id === props.modelValue ? 'border-blue' : 'border-black-1'"
				class="w-100 flex-1 border-blod flex flex-center round-8 overflow-hidden position-relative mb-4">
				<image :src="item.image" class="w-p-100" mode="widthFix" />
				<view
					class="position-absolute bottom-0 right-0 left-0 text-center py-2 item-bg fs-12 flex flex-x-space-around">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['update:modelValue','change'])
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 0
		},
		list: {
			default: [],
			type: [Array, Object]
		}
	})
	const select = (e) => {
		emit('update:modelValue', e.id)
		emit('change', e)
	}
</script>

<style>
	.item-bg {
		background: rgba(0, 0, 0, 0.7);
	}
</style>